@maincolor: #38343e;
@lightcolor: #81c300;
@bgcolor: #222026;
@roundcolor: #6c6971;
@pausecolor: #f30;
@whitecolor: #000;
@greencolor: #FF00F5;
.po(@p:absolute){
	position: @p;
}
.usn(){
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none; 
	user-select:none;
}
.ts(@count:.5s){
	-webkit-transition: @count;
	-moz-transition: @count;
	-ms-transition: @count;
	transition: @count;
}
.delay-ts(@count:.5s){
	-webkit-transition-delay: @count;
	-moz-transition-delay: @count;
	-ms-transition-delay: @count;
	transition-delay: @count;
}
.delay-ani(@count:.5s){
	-webkit-animation-delay: @count;
	-moz-animation-delay: @count;
	-ms-animation-delay: @count;
	animation-delay: @count;
}
.ani(@cont){
	-webkit-animation: @cont;
	-moz-animation: @cont;
	-ms-animation: @cont;
	animation: @cont;
}
.transform(@cont){
	-webkit-transform: @cont;
	-moz-transform: @cont;
	-ms-transform: @cont;
	transform: @cont;
}
.o(@num:0){
	opacity: @num;
}

html,body{margin: 0; font: small 'Microsoft Yahei';}
ul,li{margin: 0; padding: 0; list-style: none}
.ts5{.ts;}
#wenkmPlayer{
	.ts;
	text-align: left;
	left: -480px;
	color: @maincolor;
	width: 480px;
	.po(fixed);
	bottom: 40px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.2);
	border-radius: 5px;
	z-index: 5000;
	.player{
		.po(relative);
		overflow: hidden;
        background-color:rgba(0,0,0,.6);
		height: 168px;
		border-radius: 5px 5px 0 0;
		.cover{
			.usn;
			.po;
			background-color: #fff;
			border: 6px #fff solid;
			width: 143px;
			height: 143px;
			top: 10px;
			left: 10px;
			border-radius: 50%;
			box-shadow: 0 0 20px rgba(0,0,0,.3);
			&:after{
				content: 'No Picture';
				.po;
				.o(.5);
				width: 100%;
				left: 0;
				text-align: center;
				top: 62px;
			}
			&.changing{
				img{
					.transform(scale(.3));
					.o;
				}
			}
			img{
				.ts;
                border-radius: 50%;
                border: 5px #fff solid;
				width: 143px;
				height: 143px;
                top:-5px;
                left:-5px;
				position: relative;
				z-index: 10;
			}
		}
		.infos{
			.po;
			text-shadow: 0 1px 1px #000;
			top: 25px;
			left: 180px;
			.song{
				font-size: 1em;
				color: #fff;
			}
			.songstyle{
				font-size: 1.2em;
				color: #fff;
			}
			.artist{
				color: @lightcolor;
                margin-top: 20px;
			}
			.artist1{
				color: @lightcolor;
                margin-top: 20px;
			}
			.artiststyle{
				color: @lightcolor;
                margin-top: 15px;
			}
			.artiststyle1{
				color: @lightcolor;
                float: right;
			}
			.timestyle{
				color: #fff;
                font-size: 12px;
                margin-left: 200px;
                margin-top: -20px;
			}
		}
		.control{
			.usn;
			.po;
			bottom: 39px;
			left: 190px;
			font-size: 1.6em;
			color: #fff;
			.loop,
			.prev,
			.status,
			.next,
			.random{
				.ts;
				margin-right: 25px;
                		&:hover{color: @lightcolor};
			}
			i.current{color: @lightcolor;}
			.status{
				.po(relative);
				display: inline-block;
				vertical-align: middle;
				width: 44px;
				height: 44px;
				overflow: hidden;
				border-radius: 50%;
				background-color: @lightcolor;
				background-image: linear-gradient(90deg, @roundcolor 50%, transparent 50%, transparent), linear-gradient(90deg, @lightcolor 50%, @roundcolor 50%, @roundcolor);
				b{
					.po;
					width: 40px;
					height: 40px;
					text-align: center;
					border: solid @pausecolor 2px;
					top: 0;
					left: 0;
					border-radius: 50%;
					background-color: @bgcolor+10;
					display: inline-block;
					overflow: hidden;
					.fa{
						display: block;
						width: 40px;
						height: 40px;
						line-height: 40px !important;
                        &:hover{color: @pausecolor};
					}
					.play{
						color: @pausecolor;
                        &:hover{color: @lightcolor};
						.ts;
					}
				}
			}
		}
		.bottom{
			.usn;
			.po;
			background-color: #fff;
			height: 25px;
			width: 100%;
			left: 0;
			bottom: 0;
			line-height: 25px !important;
			.volume{
				.po;
				left: 196px;
				top: 0px;
				color: #cccbce;
				.mute{float: left;}
				.volumeup{float: right;}
				.progress{
					.po(relative);
					width: 145px;
					margin: 0 15px;
					margin-top: 10px;
					height: 3px;
					background-color: #b0aeb2;
					.volume-on{
						.po(relative);
						background-color: @lightcolor;
						width: 0;
						height: 3px;
						.drag{
							width: 14px;
							height: 14px;
							.po;
							top: -5px;
							right: -5px;
							background-color: #fff;
							border-radius: 50%;
							box-shadow: 0 0 1px 1px rgba(0,0,0,.2);
							
						}
					}
				}
			}
			.switch-playlist{
				.po;
				.ts;
				top: 0;
				right: 10px;
				
                &:hover{color: @lightcolor};
			}
		}
	}
	.playlist{
		.ts;
		padding: 0 15px;
		height: 0;
		overflow: hidden;
		background-color: #fff;
		border-top: solid #ebebeb 1px;
		.mkheader{
			.ts;
			font-size: 1.6em;
			padding:0 0 10px 0;
			.transform(translate3d(500px,0,0));
            border-bottom: solid #eee 1px;
		}
		.mklist{
			.ts;
			.o;
			.transform(translate3d(500px,0,0));
			.usn;
			height: 300px;
            weight: 100%;
			overflow: hidden;
			-webkit-transform-origin: 50% 100px;
			-moz-transform-origin: 50% 100px;
			-ms-transform-origin: 50% 100px;
			transform-origin: 50% 100px;
			ul{margin-right: 15px;}
			li{
				.ts(.3s);
                
				height: 40px;
				line-height: 40px !important;
				border-bottom: solid #eee 1px;
				&:last-child{border-bottom: none;}
				&:hover{
					background-color: fadeout(@whitecolor, 80%);
				}
				&.current{
					background-color: @lightcolor;
					color: #fff;
					.index{
						color: #fff;
					}
					.artist{display: inline-block;}
				}
				.index{
					.o(.3);
					padding: 0 10px;
				}
				.artist{display: none;}
			}
			.mCSB_scrollTools{
				top: 0;
				right: 0;
                
				width: 9px;
				height: 100%;
				background-color: #eee;
				border-radius: 9px;
				.o;
				.ts;
			}
			.mCSB_draggerContainer{height: 100%;}
			.mCSB_dragger{
				background-color: @lightcolor;
				width: 9px;
				height: auto;
				border-radius:9px;
				z-index: 999;
			}
			&:hover{
				.mCSB_scrollTools{.o(1)}
			}
		}
	}
	.flat{
		.po;
		top: 56px;
		left: 318px;
		color: #fff;
		font-size: 1.4em;
		.o;
	}
	.switch-player{
		.po;
		top: 10px;
		right: -25px;
		width: 25px;
		height: 68px;
		line-height: 68px !important;
		background-color:rgba(0,255,0,.6);
		border-radius: 0 5px 5px 0;
		box-shadow: inset 5px 0 4px 0 rgba(0,0,0,.2);
		color: #fff;
		font-size: 2em;
		text-align: center;
		
		.fa{.ts(1s);}
		&:hover{background-color:rgba(0,0,0,.4);color: #f30;}
	}
	&.show{
		.transform(translate3d(480px,0,0));
		.switch-player{
        background-color:rgba(0,0,0,.4);
        &:hover{background-color:rgba(0,255,0,.6);color: #fff}
        color: #f30;
			.fa{
				.transform(rotate(180deg));
			}
		}
	}
	&.showList{
		.switch-playlist{
			color: @lightcolor;
		}
		.playlist{
			padding: 5px;
			height: 338px;
			.mkheader{
				.delay-ts(.3s);
				.transform(translate3d(0,0,0));
			}
			.mklist{			
				.delay-ts;
				.o(1);
				.transform(translate3d(0,0,0));
			}
		}
	}
	&.playing{
		.player{
			.control{
				.status{
					b{
						border-width: 0;
						top: 2px;
						left: 2px;
						.play{margin-top: -40px;}
					}
				}
			}
		}
		.flat{
			.o(1);
			.ani(rotate 18s linear infinite);
			i{
				.po;
				top: 0;
				left: 0;
				.o;
				.ani(flat 4s cubic-bezier(.09,.64,.16,.94) infinite);
			}
			i:nth-of-type(1){
				.delay-ani(0);
				.transform(rotate(35deg) translateX(-5px));
			}
			i:nth-of-type(2){
				.delay-ani(.8s);
				.transform(rotate(-5deg) translateX(-15px));
			}
			i:nth-of-type(3){
				.delay-ani(1.6s);
				.transform(rotate(45deg) translateX(5px));
			}
			i:nth-of-type(4){
				.delay-ani(2.8s);
				.transform(rotate(-25deg) translateX(-8px));
			}
			i:nth-of-type(5){
				.delay-ani(3.2s);
				.transform(rotate(-35deg));
			}
			i:nth-of-type(6){
				.delay-ani(4.5s);
				.transform(rotate(15deg) translateX(-5px));
			}
		}
	}
}

@-webkit-keyframes rotate{
	50%{.transform(rotate(-20deg))}
}
@-moz-keyframes rotate{
	50%{.transform(rotate(-20deg))}
}
@-ms-keyframes rotate{
	50%{.transform(rotate(-20deg))}
}
@keyframes rotate{
	50%{.transform(rotate(-20deg))}
}

@-webkit-keyframes flat{
	from{.o(1);}
	to{top: -48px; left: 78px; .o; font-size: .6em;}
}
@-moz-keyframes flat{
	from{.o(1);}
	to{top: -48px; left: 78px; .o; font-size: .6em;}
}
@-ms-keyframes flat{
	from{.o(1);}
	to{top: -48px; left: 78px; .o; font-size: .6em;}
}
@keyframes flat{
	from{.o(1);}
	to{top: -48px; left: 78px; .o; font-size: .6em;}
}

#wenkmTips{
	.po(fixed);
	font-size: 1.4em;
	border-radius: 5px 0 0 5px;
	z-index: 5000;
	top: 10px;
	right: 0;
	background-color:rgba(0,0,0,.3);
	padding: 15px;
	color: @greencolor;
	.ts;
	.transform(translate3d(100%,0,0));
	&.show{
		.transform(translate3d(0,0,0));
	}
}

#wenkmLrc{
	.ts;
	.po(fixed);
	.transform(translate3d(0,100%,0));
	color: @whitecolor;
	z-index: 4999;
	bottom: 0;
	left: 0;
    font-size: 1.2em;
	width: 100%;
	height: 40px;
    background-color:rgba(0,0,0,.2);
	overflow: hidden;
	ul{.ts}
	li{
		.ts;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 1.6em;
		text-shadow: 1px 1px 1px #CCC,2px 2px 2px #CCC,3px 3px 3px #444;
		.transform(scale(.8));
		&.current{
			color: @greencolor;
			.transform(scale(1));
		}
	}
	&.show{
		.transform(translate3d(0,0,0));
	}
/**
	&:hover{
		height: 120px;
		ul{
			margin: 40px 0;
		}
	}
*/
}
#wenkmKsc{
	.ts;
	.po(fixed);
	bottom: 0;
	z-index: 4999;
	width: 100%;
	background-color:rgba(0,0,0,.2);
	.line{
		.po;
		font-size: 1.8em;
        text-shadow: 1px 1px 1px #CCC,2px 2px 2px #CCC,3px 3px 3px #444;
		.transform(scale(1.01));
		visibility: hidden;
		height: 37px;
		span{
			width: 30px;
			display: inline-block;
			overflow: hidden;
			&.blank{
				width: 5px;
			}
			em{
				font-weight: bold;
				font-style: normal;
				display: block;
			}
		}
		.bg{
			bottom: 0;
			color: #fff;
		}
		.lighter{
			.po;
			bottom: 0;
			color: #00FF00;
			width: 100%;
			overflow: hidden;
			em{
				width: 0;
				overflow: hidden;
			}
		}
		&.g{
			.lighter{
				color: #FF0000;
			}
		}
		&.t{
			.lighter{
				color: #FF00FF;
			}
		}
        &.m{
			.lighter{
				color: #0000FF;
			}
		}
		&.current{
			.o(1);
			.transform(scale(1));
			visibility: visible;
		}
	}
	.line1{
    text-align: left;
		right: 53%;
        bottom: 2px;
	}
	.line2{
		text-align: left;
		bottom: 2px;
		left: 53%;
	}
}